<script>
import draggable from 'vuedraggable'
import render from '@/components/render/render'

const components = {
  itemBtns(h, currentItem, index, list) {
    const { copyItem, deleteItem } = this.$listeners
    return [
        <div style='text-align: right; float:right '>
          <span class="drawing-item-copy" title="复制" style='padding-right:10px;' onClick={event => {
            copyItem(currentItem, list)
            event.stopPropagation()
          }}>
            <i class="el-icon-copy-document"/>
          </span>
          <span class="drawing-item-delete" title="删除" onClick={event => {
            deleteItem(index, list)
            event.stopPropagation()
          }}>
            <i class="el-icon-delete"/>
          </span>
        </div>
    ]
  }
}
const layouts = {
  colFormItem(h, currentItem, index, list) {
    const { activeItem, changeLabel } = this.$listeners
    const config = currentItem.__config__
    const child = renderChildren.apply(this, arguments)
    let className = this.activeId === currentItem.formId ? 'drawing-item active-from-item' : 'drawing-item'
    if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
    let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
    if (config.showLabel === false) labelWidth = '0'
    return (
      <div>
        <el-col span={config.span} class={className}
                nativeOnClick={event => {
                  activeItem(currentItem)
                  event.stopPropagation()
                }}>
          {components.itemBtns.apply(this, arguments)}
          <el-form-item label-width={labelWidth}
                        label={config.showLabel ? index + 1 + '--' + config.label : ''} required={config.required}>
            <render key={config.renderKey} conf={currentItem} onInput={event => {
              this.$set(config, 'defaultValue', event)
            }}>
              {child}
            </render>
          </el-form-item>
        </el-col>

      </div>
    )
  }


}

function renderChildren(h, currentItem, index, list) {
  const config = currentItem.__config__
  if (!Array.isArray(config.children)) return null
  return config.children.map((el, i) => {
    const layout = layouts[el.__config__.layout]
    if (layout) {
      return layout.call(this, h, el, i, config.children)
    }
    return layoutIsNotFound.call(this)
  })
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
}

export default {
  components: {
    render,
    draggable
  },
  props: [
    'currentItem',
    'index',
    'list',
    'activeId',
    'formConf'
  ],
  data() {
    return {
    }
  },
  mounted() {

  },
  render(h) {
    const layout = layouts[this.currentItem.__config__.layout]
    if (layout) {
      return layout.call(this, h, this.currentItem, this.index, this.list)
    }
    return layoutIsNotFound.call(this)
  }
}
</script>
<style scoped>


/deep/ .el-radio, /deep/ .el-checkbox {
  display: block;
  line-height: 33px;
  margin: auto;
}

/deep/ .el-radio__label, /deep/ .el-checkbox__label {
  font-size: 14px;
  padding-left: 10px;
  text-overflow: ellipsis;
  white-space: normal;
  min-height: 18px;
  vertical-align: middle;
  display: inline-block;
}

/deep/ .item-other-input {
  margin-left: 20px;

  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/deep/ .item-other-input:focus {
  outline: none;
}
.drawing-item-delete,.drawing-item-copy{
  :hover{
    cursor: pointer;
  }
}
</style>
